<template>
	<view class="main-bx">
		<view class="box-main-top">
			<view class="order-sn">
				<view class="top-nav">
					<view class="label">
						<u-icon name="car-fill" color="#f6be64" style="margin-right: 10rpx;" size="24"></u-icon> 预约装货
					</view>
					<view class="right doing" v-if="step != 1">
						未签到
					</view>
					<view class="right doing" v-else="setp == 1">
						已签到
					</view>
				</view>
				<view class="center-box">
					<view class="image">
						<image class="image-i" src="../../static/zh.png" mode="aspectFit"></image>
					</view>
					<view class="btn-name">
						<view class="name">车牌号：{{driverInfo.plateNumber}}</view>
						<view class="name">月台：{{dockInfo.locationDesc}}</view>
					</view>
				</view>

			</view>
			<view class="label">
				<u-icon name="map-fill" color="#f5c576" size="20" style="margin-right: 10rpx;"></u-icon> 签到/打卡
			</view>
			<view class="sign-card" @click="checkIn">
				<view class="card" >
					<view class="local" >
						<u-icon name="map-fill" size="36" color="#fff" ></u-icon>
					</view>
				</view>
				<view class="name" >
					已到达打卡范围
				</view>
			</view>
			<view class="label">
				<u-icon name="map-fill" color="#f5c576" size="20" style="margin-right: 10rpx;"></u-icon> 签到成功
			</view>
			<view class="sign-card">
				<u-steps :current=step style="margin-left: 40rpx;" direction="column">
					<u-steps-item title="待签到" desc="2025-09-12 10:30:07">
					</u-steps-item>
					<u-steps-item title="打卡签到成功" desc="2025-09-12 10:30:07">
					</u-steps-item>
					<u-steps-item title="已出库" desc="10:35"></u-steps-item>
					<u-steps-item title="运输中" desc="11:40"></u-steps-item>
				</u-steps>
			</view>
		</view>

	</view>
</template>

<script>
	import { mine } from  '@/api/mobile/reservation.js'
	import { dockById } from  '@/api/mobile/dock.js'
	import { signIn, mySign} from  '@/api/mobile/sign.js'
	import { addQueueRecord } from '@/api/mobile/queueRecord.js'

export default {
	data() {
		return {
			dockInfo: {},
			reservationInfo:{},
			driverId: null,
			driverInfo: null,
			appointId:null,
			signInForm:{},
			isSignEd:false,
			signLog:{},
			step:0,
			queueRecordForm:{
				parkId: null,
				appointmentId: null,
				driverId: null,
				vehicleId: null,
				queueNo: null,
				queueGroup: null,
				queueSequence: null,
				checkinTime: null,
				startWaitTime: null,
				callTime: null,	
				enterTime: null,
				queueStatus: null,
				priorityLevel: null,
				estimatedWaitTime: null,
				actualWaitTime: null,
				dockId: null,
				status: null,
			},

		}
	},
  onLoad() {
		this.driverId = uni.getStorageSync('carId')
		this.driverInfo = uni.getStorageSync('carInfo')
		this.getMyReservation()
	},
  computed:{

  },
  methods:{
	 async getMyReservation(){
		let res = await mine(this.driverId);
		console.log("接口响应：", res.data);
		this.appointId = res.data[0].id
		let resDock = await dockById(res.data[0].dockId)
		this.dockInfo = resDock.data
		await this.getMySignLog()
	},
	async checkIn(){
		this.signInForm.appointmentId = this.appointId
		this.signInForm.method = '0'
		this.signInForm.status = '0'
		this.signInForm.delFlag = '0'
		this.signInForm.driverId = this.driverId
		// this.signInForm.location = '0'
		console.log("签到接口响应：", this.signInForm);
		if(this.isSignEd){
			uni.showModal({
				title: "系统提示",
				content: '已签到,请勿重复签到',
				showCancel: false // 只显示“确定”，避免用户误操作
			});
		}else{
			let res = await signIn(this.signInForm)
			console.log("签到接口响应：", res);
			uni.showModal({
				title: "系统提示",
				content: `恭喜你，签到成功！请遵循现场指示前往 ${this.dockInfo.locationDesc}月台`,
				// 箭头函数保留 this 指向
				success: (res) => {
					// 跳转到导航指示页面
					if (res.confirm) {
						this.getMySignLog()
						//this.toRouter('/pages/login/index'); // 现在能正常调用
					}
				}
			});
		}
		
	},
	// 查询签到记录
	async getMySignLog(){
		let res = await mySign(this.appointId,this.driverId)
		console.log("查询签到记录接口响应：", res);
		if(res.code == 601){
			this.isSignEd = false
		}else{
			this.signLog = res.data
			this.isSignEd = true
			this.step = 1
		}
	},
	// 新增排队记录
	async addNewQueueRecord(){
		let res = await addQueueRecord();
		thi.queueRecordForm.
		console.log("新增排队记录接口响应：", res);
	}
  }
}
</script>

<style lang="scss" scoped>
	.main-bx {
		min-height: 100vh;
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		background: #f6f6f6;
		width: 100%;

		.box-main-top {
			width: 100%;
			min-height: 100rpx;
			background: #fff;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.order-sn {
				.top-nav {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.label {
						font-size: 28rpx;
						color: #333;
						width: 300rpx;
						display: flex;
						align-items: center;
						font-weight: 600;
					}

					.right {
						color: #ff9900;
						font-size: 24rpx;
						font-weight: 800;

						&.doing {
							color: #19be6b;
						}
					}
				}

				.center-box {
					width: 100%;
					min-height: 80rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					.image {
						height: 100rpx;

						.image-i {
							width: 90rpx;
							height: 90rpx;
						}
					}

					.btn-name {
						width: 400rpx;
						min-height: 100rpx;
						margin-left: 30rpx;

						.name {
							font-size: 28rpx;
							font-weight: 600;
						}
					}
				}

			}

			.label {
				width: 100%;
				font-size: 28rpx;
				color: #333;
				font-weight: 800;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
			}

			.sign-card {
				width: 100%;
				min-height: 300rpx;
				margin-top: 25rpx;

				.card {
					width: 100%;
					height: 200rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.local {
						height: 160rpx;
						background: #2979ff;
						width: 160rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.name {
					margin-top: 20rpx;
					width: 100%;
					font-size: 24rpx;
					color: #666;
					text-align: center;
				}
			}

			.main-box {
				width: 100%;
				margin-top: 20rpx;
				display: flex;

				.left-line {
					width: 50rpx;
					min-height: 800rpx;
					padding-left: 50rpx;

					.line {
						width: 4rpx;
						min-height: 800rpx;
						background: #eee;

						.rate {
							width: 4rpx;
							background: #19be6b;
							height: 30px;
						}

					}
				}

				.right-line {
					width: 600rpx;
					min-height: 200rpx;

					.item {
						width: 100%;
						min-height: 120rpx;

						.titles {
							font-size: 28rpx;
							color: #333;
							font-weight: 800;
						}

						.content {
							width: 100%;
							font-size: 24rpx;
							color: #666;

						}

						&.complate {
							color: #19be6b;

							.titles {
								color: #19be6b;
							}

							.content {
								color: #19be6b;
							}
						}
					}
				}
			}
		}
	}
</style>
